/**
 * 安全区域处理工具
 * 用于处理 H5 页面嵌入 App 时的安全区域适配
 */

// 检测是否在 iOS 环境中
export const isIOS = (): boolean => {
  return /iPad|iPhone|iPod/.test(navigator.userAgent) && !(window as any).MSStream;
};

// 检测是否在 Android 环境中
export const isAndroid = (): boolean => {
  return /Android/.test(navigator.userAgent);
};

// 检测是否在 App 内部运行
export const isInApp = (): boolean => {
  // 这里可以根据实际情况添加 App 内嵌 WebView 的特定标识
  // 例如，App 可能会在 WebView 中注入特定的全局变量
  return (
    typeof (window as any).AppInterface !== 'undefined' || 
    typeof (window as any).webkit?.messageHandlers?.AppInterface !== 'undefined' ||
    document.documentElement.classList.contains('in-app')
  );
};

// 应用安全区域 CSS 变量
export const applySafeAreaInsets = (): void => {
  // 获取安全区域信息
  const safeAreaInsets = getSafeAreaInsets();
  console.log('safeAreaInsets', safeAreaInsets);
  
  // 将安全区域信息应用为 CSS 变量
  document.documentElement.style.setProperty('--safe-area-inset-top', `${safeAreaInsets.top}px`);
  document.documentElement.style.setProperty('--safe-area-inset-right', `${safeAreaInsets.right}px`);
  document.documentElement.style.setProperty('--safe-area-inset-bottom', `${safeAreaInsets.bottom}px`);
  document.documentElement.style.setProperty('--safe-area-inset-left', `${safeAreaInsets.left}px`);
};

// 获取安全区域尺寸
export const getSafeAreaInsets = (): { top: number; right: number; bottom: number; left: number } => {
  // 默认安全区域
  const defaultInsets = { top: 0, right: 0, bottom: 0, left: 0 };
  
  // 如果支持 CSS 环境变量（iOS 11.2+）
  if (isIOS() && window.CSS && CSS.supports('padding-top: env(safe-area-inset-top)')) {
    // 创建一个临时元素来获取计算后的 CSS 环境变量值
    const div = document.createElement('div');
    div.style.paddingTop = 'env(safe-area-inset-top)';
    div.style.paddingRight = 'env(safe-area-inset-right)';
    div.style.paddingBottom = '34px'; // 底部安全区域
    div.style.paddingLeft = 'env(safe-area-inset-left)';
    document.body.appendChild(div);
    
    const computedStyle = window.getComputedStyle(div);
    
    defaultInsets.top = parseInt(computedStyle.paddingTop) || 0;
    defaultInsets.right = parseInt(computedStyle.paddingRight) || 0;
    defaultInsets.bottom = parseInt(computedStyle.paddingBottom) || 0;
    defaultInsets.left = parseInt(computedStyle.paddingLeft) || 0;
    
    document.body.removeChild(div);
  } else if (isInApp()) {
    // 如果在 App 内，可以通过 App 提供的接口获取安全区域信息
    // 这里需要根据实际的 App 接口进行调整
    try {
      if (typeof (window as any).AppInterface?.getSafeAreaInsets === 'function') {
        const appInsets = (window as any).AppInterface.getSafeAreaInsets();
        if (appInsets) {
          return {
            top: appInsets.top || 0,
            right: appInsets.right || 0,
            bottom: appInsets.bottom || 0,
            left: appInsets.left || 0
          };
        }
      }
      
      // iOS WKWebView 消息处理
      if (typeof (window as any).webkit?.messageHandlers?.getSafeAreaInsets !== 'undefined') {
        // 注意：这是异步的，可能需要回调处理
        // 这里简化处理，实际使用时可能需要 Promise 封装
      }
    } catch (e) {
      console.error('Failed to get safe area insets from App:', e);
    }
    
    // 如果无法从 App 获取，使用一些常见设备的默认值
    if (isIOS()) {
      // iPhone X 及以上机型的默认安全区域
      const hasNotch = window.screen.height >= 812 || window.screen.width >= 812;
      if (hasNotch) {
        defaultInsets.top = 44;  // 刘海屏顶部
        defaultInsets.bottom = 34;  // 底部 Home Indicator
      }
    } else if (isAndroid()) {
      // Android 设备通常底部有导航栏
      defaultInsets.bottom = 24;
    }
  }
  
  return defaultInsets;
};

// 初始化安全区域
export const initSafeArea = (): void => {
  // 添加 meta 标签以支持安全区域
  const meta = document.createElement('meta');
  meta.name = 'viewport';
  meta.content = 'width=device-width, initial-scale=1.0, viewport-fit=cover';
  document.head.appendChild(meta);

  if (!(window.CSS && CSS.supports('padding-bottom: env(safe-area-inset-bottom)'))) {
    document.body.classList.add('no-safe-area');
  }
  
  // 应用安全区域 CSS 变量
  applySafeAreaInsets();
  
  // 监听屏幕旋转事件，重新计算安全区域
  window.addEventListener('orientationchange', () => {
    setTimeout(applySafeAreaInsets, 100);
  });
  
  // 监听窗口大小变化，重新计算安全区域
  window.addEventListener('resize', () => {
    setTimeout(applySafeAreaInsets, 100);
  });
};
